<template>
	<div class="sidebar col">
		<div class="sidebar-fav col">
			<div class="sidebar-fav-title row" 
				@click.stop="onClickPC"
				>
				<img src="resource/images/pc.png" draggable="false"  />
				<h3 class="sidebar-fav-title-txt mra">磁盘驱动器</h3>
				<img src="resource/images/off.png" v-if="this.showDisks"/>
				<img src="resource/images/down.png" v-if="!this.showDisks"/>
			</div>		
			<div class="sidebar-fav-content col" v-if="this.showDisks">
				<div class="sidebar-fav-content-item row"  v-for="item in w.pc.list"
					@click.stop="w.files.load(item)">
					<img class="sidebar-fav-item-img" src="resource/images/harddisk.png" draggable="false" />
					<div class="sidebar-fav-item-text">{{item}}</div>						
				</div>				
			</div>
		</div>
		<div class="sidebar-fav col " >
			<div class="sidebar-fav-title row" 
				@click.stop="onClick"
				>
				<img src="resource/images/star.png" draggable="false"  />
				<h3 class="sidebar-fav-title-txt mra">收藏夹</h3>
				<img src="resource/images/off.png" v-if="this.showfav"/>
				<img src="resource/images/down.png" v-if="!this.showfav"/>
			</div>
			<div class="sidebar-fav-content col" v-if="this.showfav">
				<div class="sidebar-fav-content-item row"  v-for="item in w.fav.list"
					@click.stop="w.files.load(item)">
					<img class="sidebar-fav-item-img" src="resource/images/file_icon/folder.png" draggable="false" />
					<div class="sidebar-fav-item-text">{{item}}</div>
					<img class='sidebar-fav-item-delete' src="resource/images/delete.png" @click.stop="w.fav.remove(item)" draggable="false"/>	
				</div>				
			</div>	
			
		</div>
		
	</div>
</template>

<script>
	{
		name:'sidebar',
		data:function(){return{
			w:wnds,
			showfav:true,
			showDisks:false
		}},
		watch:{
			'w.fav.list':function(n,o){
				if(o.length == 0){return}
				if(this.showfav == false){
					this.showfav = true
					var that = this
					setTimeout(function(){
						that.showfav = false
					},3000)
				}
			}
		},
		methods:{			
			onClick:function(){
				this.showfav = !this.showfav
			},
			onClickPC:function(){
				this.showDisks = !this.showDisks
			}
		}
		
	}
</script>

<style>
	.sidebar{
		width: auto;
		/*border-right: #D2D7DC thin solid;*/	
		align-items: flex-start;
		background-color: #F5F5F5;	
		padding: 0 5px;
	}
	.sidebar-hiden{
		width:30px;
		height:30px;
	}
	.sidebar-fav{
		width: auto;
		height: auto;
	}
	.sidebar-fav-title{
		height: 25px;		
		background-color: #F5F5F5;
		border-bottom: #D0CDC4 thin solid;
	}
	.sidebar-fav-title > img{
		width: 16px;
		height: 16px;
		margin: 0 5px;
	}
	.sidebar-fav-title > img:hover{
	background-color: #E0E0DC;
}
	.sidebar-fav-title-txt{
		width: 100px;
	}
	.sidebar-fav-content{
		border-bottom: #D0CDC4 thin solid;
	}
	.sidebar-fav-content-item{
		min-width: 150px;
		min-height: 26px;		
	}
	.sidebar-fav-item-img{
		width: 16px;
		height: 16px;
	}
	.sidebar-fav-item-text{
		justify-content: flex-start;
		text-align: left;				
		font-size: 10px;
	}
	.sidebar-fav-content-item:hover{
		background-color: #E0E0DC;
		border-radius: 3px;
	}
	.sidebar-fav-item-delete{
		width: 12px;
		height: 12px;
		margin-left: 5px;		
	}
</style>